<% has_level_select = headline_editor.level_options.many? %>
<% has_size_select = headline_editor.size_options.many? %>

<%= content_tag :div,
  class: headline_editor.css_classes,
  data: headline_editor.data_attributes do %>
  <%= element_form.fields_for(:ingredients, headline_editor.ingredient) do |f| %>
    <%= ingredient_label(headline_editor) %>

    <div class="input-field">
      <%= f.text_field :value,
        minlength: headline_editor.length_validation&.fetch(:minimum, nil),
        maxlength: headline_editor.length_validation&.fetch(:maximum, nil),
        required: headline_editor.presence_validation?,
        pattern: headline_editor.format_validation,
        id: headline_editor.form_field_id %>
      <% if headline_editor.settings[:anchor] %>
        <%= render "alchemy/ingredients/shared/anchor", ingredient_editor: headline_editor %>
      <% end %>

      <div class="input-addon right<%= " second" if has_size_select %>">
        <sl-tooltip content="<%= f.object.class.human_attribute_name(:level) %>">
          <%= f.select :level,
            options_for_select(headline_editor.level_options, headline_editor.level),
            {},
            {
              class: "custom-select",
              disabled: !has_level_select
            } %>
        </sl-tooltip>
      </div>

      <% if has_size_select %>
        <div class="input-addon right">
          <sl-tooltip content="<%= f.object.class.human_attribute_name(:size) %>">
            <%= f.select :size, options_for_select(headline_editor.size_options, headline_editor.size),
              {},
              { class: "custom-select" } %>
          </sl-tooltip>
        </div>
      <% end %>
    </div>
  <% end %>
<% end %>
